<template>
  <div class="contents">
    <!-- <PanelTitle title="地块环境" /> -->
    <TabPanelTitle>
      <div class="title-tab">
        <div class="title-text" @click="
          curPanel = 0;
        initChart();
        ">
          土壤墒情
        </div>
        <div class="title-text right-text" @click="
          curPanel = 1;
        initChart();
        ">
          地块环境
        </div>
      </div>
    </TabPanelTitle>

    <div class="mt">
      <div class="tabs">
        <div>
          <a-dropdown :trigger="['click']">
            <a @click.prevent> {{ curTabs[curTab] }} </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="(item, index) in curTabs" :key="item">
                  <a href="javascript:;" @click="choseCur(index)">{{ item }}</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import TabPanelTitle from "../../component/TabPanelTitle.vue";
import dayjs from 'dayjs'
import { useLandStore } from "@/stores/land";
const landStore = useLandStore()
const maps = ref(null);
// 35:土壤温度  36:土壤推荐温度
//  37:土壤湿度  38:土壤推荐湿度  39: ph
// 40: 地块温度 41:地块推荐温度 42:地块湿度
// 43: 地块推荐湿度 44: 降水量  45: 风速

let curPanel = ref(0);

let tabsOne = ["温度", "湿度", "pH"];
let tabsTwo = ["温度", "湿度", "降水量", "风向/风速"];
let curTabs = ref(["温度", "湿度", "pH"]);

let curTab = ref(0);

let mapData = ref({});
const soilMoisture = ref({})
const landEnv = ref({})
let data = {}
let iotSoilLandList = []

const getData = async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/base/land/soil/air/env",
    method: "get",
    // params: {landSerialNo : landStore.land.serialNo}, 
  });
  data = res.data
  iotSoilLandList = res.data.iotSoilLandList
  for (let item of iotSoilLandList) {
    item.updateTime = dayjs(item.updateTime).format('HH:mm')
  }
  initMap();
}

onMounted(async () => {
  getData()

  // let res = await http({
  //   url: env.VITE_ZHER_DATA_CENTER + "/base/soil/moisture/land/env",
  //   method: "get",
  //   params: {
  //     year: new Date().getFullYear(),
  //     startDate: dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
  //     endDate: dayjs().format('YYYY-MM-DD'),
  //   }

  // });

  // landEnv.value = res.data.landEnv;
  // soilMoisture.value = res.data.soilMoisture;
  // initMap();
});

const initChart = () => {
  if (curPanel.value == 0) {
    curTabs.value = tabsOne;
    curTab.value = 0;
  } else {
    curTabs.value = tabsTwo;
    curTab.value = 0;
  }

  initMap();
};
const choseCur = (index) => {
  curTab.value = index;
  initMap();
};

const initMap = () => {

  let legendData = []
  let xData = []
  let lineOne = []
  let lineTwo = []
  let series = []
  let unit = ''
  if (curPanel.value == 0) {
    if (curTab.value == 0) {
      legendData = ['温度', '推荐温度']
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.soilTemperature)
      lineTwo = iotSoilLandList.map(item => data.soilTempRec)
      unit = '单位：摄氏度'
      series = [
        {
          name: '温度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },
        {
          name: '推荐温度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineTwo
        },
      ]
    } else if (curTab.value == 1) {
      legendData = ['湿度', '推荐湿度']
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.soilHumidity)
      lineTwo = iotSoilLandList.map(item => data.soilHumidRec)
      unit = '单位：%'
      series = [
        {
          name: '湿度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },
        {
          name: '推荐湿度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineTwo
        },
      ]


    } else if (curTab.value == 2) {
      legendData = ['PH', '推荐PH']
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.soilPh)
      lineTwo = iotSoilLandList.map(item => data.soilPhRec)
      unit = ''
      series = [
        {
          name: 'PH',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },
        {
          name: '推荐PH',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineTwo
        },
      ]

    }
  } else if (curPanel.value == 1) {
    if (curTab.value == 0) {
      legendData = ['温度', '推荐温度']
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.airTemperature)
      lineTwo = iotSoilLandList.map(item => data.airTempRec)
      unit = '单位：摄氏度'
      series = [
        {
          name: '温度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },
        {
          name: '推荐温度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineTwo
        },
      ]


    } else if (curTab.value == 1) {
      legendData = ['湿度', '推荐湿度']
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.airHumidity)
      lineTwo = iotSoilLandList.map(item => data.airHumidRec)
      unit = '单位：%'
      series = [
        {
          name: '湿度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },
        {
          name: '推荐湿度',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineTwo
        },
      ]

    } else if (curTab.value == 2) {
      legendData = ['降水量',]
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.airRainFall)


      unit = '单位：mm'
      series = [
        {
          name: '降水量',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },

      ]

    } else if (curTab.value == 3) {
      legendData = ['风速',]
      xData = iotSoilLandList.map(item => item.updateTime)
      lineOne = iotSoilLandList.map(item => item.airWindSpeed)

      unit = '单位：m/s'
      series = [
        {
          name: '风速',
          type: 'line',
          symbol: "none",
          smooth: true,
          data: lineOne
        },

      ]

    }
  }

  var myChart = echarts.init(maps.value);
  myChart.clear()
  myChart.setOption({
    grid: {
      left: "3%",
      right: "8%",
      bottom: "12%",
      top: "24%",
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legendData,
      bottom: 0,
      icon: "circle",
      itemHeight: fitChartSize(5),
      itemWidth: fitChartSize(5),
      textStyle: {
        //图例文字的样式
        color: "#7AFFFD",
        fontSize: fitChartSize(9),
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xData, //["", "01/01", "03/01", "05/01", "06/01", "09/01", "11/01", ""]
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      name: unit,
      nameTextStyle: {
        color: "#fff",
        fontSize: fitChartSize(9),
        padding: [0, 0, 0, fitChartSize(600)],
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.09)", //线条颜色
        },
      },
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
    },
    series: series
    // series: [
    //   {
    //     name: "温度",
    //     type: "line",
    //     symbol: "circle",
    //     smooth: true,
    //     symbolSize: function (data, param) {
    //       return fitChartSize(4);
    //     }, //拐点大小
    //     lineStyle: {
    //       normal: {
    //         width: "1", //折线粗细
    //         color: "rgba(127,209,119,1)",
    //         shadowOffsetX: fitChartSize(0), // 折线的X偏移
    //         shadowOffsetY: fitChartSize(2), // 折线的Y偏移
    //         shadowBlur: fitChartSize(10), // 折线模糊
    //         shadowColor: "rgba(0, 0, 0, .6)", //折线颜色
    //       },
    //     },
    //     itemStyle: {
    //       normal: {
    //         color: "rgba(62, 231, 188, 1)",
    //       },
    //     },
    //     data: lineOne,
    //   },
    //   {
    //     name: "推荐温度",
    //     type: "line",
    //     symbol: "circle",
    //     smooth: true,
    //     symbolSize: function (data, param) {
    //       return fitChartSize(4);
    //     }, //拐点大小
    //     connectNulls: true,
    //     lineStyle: {
    //       normal: {
    //         width: fitChartSize(1), //折线粗细
    //         color: "rgba(0, 192, 255, 1)",
    //         shadowOffsetX: fitChartSize(0), // 折线的X偏移
    //         shadowOffsetY: fitChartSize(2), // 折线的Y偏移
    //         shadowBlur: fitChartSize(10), // 折线模糊
    //         shadowColor: "rgba(0, 0, 0, .6)", //折线颜色
    //       },
    //     },
    //     itemStyle: {
    //       normal: {
    //         color: "rgba(0, 192, 255, 1)",
    //       },
    //     },
    //     data: lineTwo,
    //   },
    // ],
  });
};
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  position: relative;

  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(190);
  width: 100%;
}

.title-tab {
  display: flex;
}

.title-text {
  line-height: vw(30);
  margin-left: vw(60);
  font-size: vw(14);
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}

.right-text {
  margin-left: vw(14);
}

.tabs {
  position: absolute;
  z-index: 20;
  width: vw(66);
  height: vh(20);
  line-height: vh(20);
  padding: 0 2px;
  background: rgba(8, 35, 53, 0.5);
  border-radius: vh(10);
  text-align: center;
  margin: vh(10) vw(10) 0 vw(10);

  >div {
    height: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: vh(12);

    background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 60%);
    color: transparent;
    -webkit-background-clip: text;
    cursor: pointer;
  }
}
</style>